<template>
	<zui-box>

	<!-- 头部导航 -->
	<zui-navbar title='分类'></zui-navbar>
	<u-gap height="30rpx"></u-gap>

		<!-- 轮播图 -->
		<view class='banner'>
			<u-swiper bgColor='transparent' :list="banner" keyName="img" circular height="200rpx" radius='0'
				wigth="750rpx"></u-swiper>
		</view>
		
		<u-gap height="64rpx"></u-gap>
		
		<!-- 分类九宫格 -->
		<view class="classify_list">
			<u-grid col="4" :border="false" @click="click_classify">
				<u-grid-item v-for="(item,index) in classify_list" :key="index" :name="item.id">
					<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="item.cat_img" :size="35"></u-icon>
					<text class="grid-text">{{item.cat_name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		
			
	</zui-box>
</template>
<script>
	export default {
		data() {
			return {
				banner: [],//轮播图
				classify_list: [],//分类列表
			}
		},
		//每次进入页面
		onShow() {
			//获取接口
			this.get_banner();
			this.get_classify();
		},
		methods: {
			//获取轮播图
			get_banner() {
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/setting/getSingle', {
					params: {
						group:'goods',
						key:'image_general',
					}
				}).then(res => {
					let arr = [
						{img:res.value,id:1}
					];
					this.banner = arr;
				}).catch(err => {})
			},
			
			get_classify(){
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/goods/getCategoryList', {
					params: {
						is_recommend:0
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('获取分类',res);
					this.classify_list = res;
				}).catch(err => {
					
				})
			},
			click_classify(id){
				console.log('获取id',id)
				//跳转到详情1&name=uniapp
				let name = ''
				 let item =this.classify_list.find(item => item.id == id);
				 name = item.cat_name
				uni.navigateTo({ url: '/pages/index/good_list?cat_id='+id+'&name='+name })
			}
		}
	}
</script>
<style lang="scss" scoped>
	//轮播图
	.banner {
		/deep/.u-swiper__wrapper__item__wrapper {
			// padding: 0 24rpx !important;
			width: 690rpx !important;
			margin: 0 auto !important;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
	
	//分类九宫格
	.classify_list {
		color:#F1B863;
		.grid-text {
			font-size: 24rpx;
			line-height: 3;
		}
	
		/deep/.u-icon__img {
			height: 70rpx !important;
			width: 70rpx !important;
		}
	}
	
</style>
